<template>
  <div :class="editMode?'modelClass':''">
    <el-image v-if="editMode&&detail.imageUrl" :src="baseUrl+detail.imageUrl" class="view-image" crossorigin="anonymous"
              @dragstart.prevent @dragover.prevent @drop.prevent/>
    <el-image v-else-if="!detail.imageUrl||!detail.modelUrl" :src="noImage" crossorigin="anonymous" @dragstart.prevent
              @dragover.prevent @drop.prevent></el-image>
    <iframe v-else
            :height="detail.style.position.h" :src="detail.modelUrl" :width="detail.style.position.w" frameborder="0"></iframe>
  </div>
</template>

<script>
import noImage from '@/views/zutai/images/noImage.png'
import {ModelObj, ModelCollada, ModelFbx} from 'vue-3d-model'

import BaseView from './View';

export default {
  name: 'view-3D',
  components: {ModelObj, ModelCollada, ModelFbx},
  extends: BaseView,
  props: {},
  data() {
    return {
      baseUrl: '',
      noImage: noImage,
    }
  },
  mounted() {
    this.baseUrl = '/prod-api';
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.view-image {
  height: 100%;
  width: 100%;
}

.modelClass {
  padding: 5px;
}
</style>
